/**
 * Created by tdzl2003 on 8/24/16.
 */
import React from 'react';
import { Popconfirm, Button, Table, Input } from 'antd';
import {get,$delete} from '../../logics/rpc';
import ObjectTable from '../../components/ObjectTable';
import {Link} from 'react-router';

const SEX_NAME = {
  'male': '男',
  'female': '女',
};



const BANK_ACCOUNT_TYPES = {
  'wx': '微信',
  'alipay': '支付宝',
  'bank': '银行卡',
};

const bankAccountColumn = [
  {
    title: '类型',
    render: (record) => BANK_ACCOUNT_TYPES[record.type],
  },
  {
    title: '账号',
    dataIndex: 'moile',
  },
  {
    title: '姓名',
    dataIndex: 'username',
  },
  {
    title: '昵称',
    dataIndex: 'nickname',
  },
];

export default class List extends React.Component{
  columns = [{
    title: 'ID',
    dataIndex: 'id',
    width: 60,
  },  {
    title: '手机号',
    dataIndex: 'mobile',
    width: 120,
  }, {
    title: '昵称',
    dataIndex: 'nickname',
  }, {
    title: '',
    render: (record) => (
        <div>
          <Popconfirm placement="topRight" title={`确认冻结账号${record.nick}吗？`} onConfirm={()=>this.deleteAcc(record)}>
            <Button size="small">冻结</Button>
          </Popconfirm>
        </div>
    ),
  }];
  state = {
    search:this.props.query
  };
  timer = null;
  fetchData = (params) => get('/admin/user/list', {
    ...params,
    search: this.state.search,
  });
  onSearchChange=(ev) => {
    const search = ev.target.value;
    if (this.timer){
      clearTimeout(this.timer);
    }
    this.timer = setTimeout(()=>{
      this.timer = null;
      this.setState({
        search,
      }, ()=>{
        this.refs.table.refresh();
      })
    }, 1000);
  };
  async deleteAcc(record) {
    try {
      await $delete(`/admin/user/frozen/${record.id}`);
      this.refs.table.removeItem(record);
    } catch (err) {
      switch (err.code) {
        case 409: alert('您不能冻结您自己！');break;
        default:alert('冻结失败');break;
      }
    }
  }

  renderAccounts = (record) => {
    return (
        <div>
          <Table
              columns={bankAccountColumn}
              dataSource={record.bankAccounts}
              pagination={false}
          />
        </div>
    )
  };
  render() {
    return (
        <div>
          <Input placeholder="查找用户" onChange={this.onSearchChange}/>
          <ObjectTable
              expandedRowRender={this.renderAccounts}
              columns={this.columns}
              fetchData={this.fetchData}
              ref="table"
          />
        </div>
    );
  }
}
